<template>
    <div class="container">
        <div class="warp">
            <div class="header">
                <div class="l">
                    <div class="avatar">
                        <img v-if="SingersInfo.image" :src="SingersInfo.image">
                        <img v-else src="@/assets/13.jpg">
                    </div>
                </div>
                <div class="r">
                    <div class="infomat">
                        <div style="margin-left: 10px;">
                            <div class="title1">
                                <span v-if="SingersInfo.name" style=" margin: 0 20px;">{{SingersInfo.name}}</span>
                                <el-button style="margin-left: 20px;">添加关注</el-button>
                            </div>
                            <div class="title2" style="margin: 20px 0;">
                               <span style="margin: 0 20px;">歌曲数</span><span>{{songsTotal}}</span>
                               <span style=" margin: 0 20px;">专辑数</span><span>{{AlbumTotal}}</span>
                            </div>
                            <div class="biaoqian" style="margin-left: 20px;">
                                <el-tag style="font-size: 18px;" type="success">标签</el-tag>
                                <span style="font-size: 16px; margin-left: 15px;" v-for="(item,index) in tags" :key="index">{{ item.name }}</span>
                            </div>
                            <div class="title3" style="margin:20px;">
                                <span style="font-size: 20px; font-weight: 600; margin-right: 20px;">简介</span>
                                <span>{{ SingersInfo.introduction }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="middle">
                <div class="title1">
                    <span>歌曲列表</span>
                </div>

                <div>
                    <songlist :tableData="tableData"></songlist>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import songlist from '@/components/Front/SongList/index.vue'
import { mapState } from 'vuex'
export default {
    components:{
        songlist,
    },
    data(){
        return {
            SingersInfo:'',
            songsTotal:'',
            AlbumTotal:'',
            tags:[],
            tableData:[],
        }
    },
    methods:{
        async getBase(){
            const res = await this.$axios.get(`Song/getDataTotal/${this.SingersInfo.id}`)
            this.songsTotal = res.data.songsTotal
            this.AlbumTotal = res.data.AlbumTotal
            
        },
        async getBiaoqian(){
            const res = await this.$axios.post(`tagMap/SelectListTag?targetType=1&targetId=${this.SingersInfo.id}`)
            console.log(res)
            for(let i=0;i<res.length;i++){
                this.tags.push(res[i].tagsList[0])
            }
        },
        async getSongInfo(){
            const res = await this.$axios.get(`Song/getSongInfo/${this.SingersInfo.id}`)
            console.log("pp[pppppppp]")
            console.log(res)
            this.tableData = res
        }
    },
    computed:{
        ...mapState('editfo',['baseDate'])
    },
    created(){
        this.SingersInfo = this.baseDate
        this.getBiaoqian()
        this.getBase()
        this.getSongInfo()
    }
}
</script>

<style lang="less" scoped>

.container{
    width:100%;
    height: 100%;
    margin-top: 90px;
}
.container .warp{
    height: 100%;
    margin: 0 100px;
}

.warp .header{
    height: 100%;
    display: flex;
    .l{
        height: 100%;
        .avatar{
            width: 220px;
            height: 220px;
            background-color: cadetblue;
            img{
                height: 100%;
                width: 100%;
            }
        }
    }
    .r{
        .infomat{
            .title1{
                width: 600px;
                display: flex;
            }
            .title1 span{
                font-size: 25px;
                font-weight: 600;
            }
    
            .title2 span{
                font-size: 20px;
                font-weight: 600;
            }
        }
    }
}
.warp .middle{
    margin-top: 20px;
}
.middle .title1 span{
    font-size: 25px;
    font-weight: 400;
}
</style>